import React, { CSSProperties, FC } from 'react'
import styled from "styled-components"
import * as echarts from 'echarts'
import { ECharts } from 'echarts'
import Title from '@/components/pages/title'
import { observer } from 'mobx-react'
import { IDateLineChart } from '@/types/echart'

const ChartPie = styled.div`
    width: 100%;
    height: 100%;
    position: relative;
    .content{
      position:absolute;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
      width: 95%;
      height: 95%;
    }

`
const getOption = (myChart: ECharts, chartparams: IDateLineChart) => {
  if (!chartparams.dataset) {
    return {};
  }
  return {
    title: {
      text: ' ',
      textStyle: {
        color: '#fff',
        fontWeight: 'normal',
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    toolbox: {
      feature: {
        // saveAsImage: {}
      }
    },
    dataset:chartparams.dataset,
    grid: {
      left: '3%',
      right: '4%',
      top: '25%',
      containLabel: true,
      textStyle: {
        color: '#fff',
        fontWeight: 'normal',
        fontSize: 14
      }
    },
    xAxis: {
      type: 'value',
      nameTextStyle: {
        color: '#fff',
        fontWeight: 'normal',
        fontSize: 14
      },
      axisLabel: {
        textStyle: {
          show: true,
          color: '#fff'
        }
      },
    },
    yAxis: {
      type: 'category',
      axisLabel: {
        textStyle: {
          show: true,
          color: '#fff'
        }
      },
      nameTextStyle: {
        color: '#fff',
        fontWeight: 'normal',
        fontSize: 14
      },
    },
    series: [
      {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#4EDFFF' },
            { offset: 0.5, color: '#02AFDB' },
            { offset: 1, color: '#028BC8' }
          ])
        },
        type: 'bar'
      }
    ]
  };
}


const Content: FC<IDateLineChart&{style?:CSSProperties}> = function (props) {
  let myEchart: ECharts;

  return (
    <ChartPie style={props.style}>
      <Title name={props.title!} />
      {props.children}
      <div className="content" ref={(ref) => {
        if (ref) {
          if (props.dataset) {
            myEchart = echarts.init(ref)
            myEchart.setOption(getOption(myEchart, props));
          }
        }

      }} />
    </ChartPie>
  )
}

export default observer(Content)
